<template>
  <div class="box">
    <div class="commonHeader header">智能硬件群</div>
    <div class="content">
      <div class="data-box boxStyle">
        <div class="line-box">
          <i class="t-l-line"></i>
          <i class="l-t-line"></i>
        </div>
        <div class="line-box">
          <i class="t-r-line"></i>
          <i class="r-t-line"></i>
        </div>
        <div class="line-box">
          <i class="b-l-line"></i>
          <i class="l-b-line"></i>
        </div>
        <div class="line-box">
          <i class="b-r-line"></i>
          <i class="r-b-line"></i>
        </div>
        <div class="box-content">
          <li
            class="liFlex"
            v-for="(list,index) in ListData"
            :key="index"
          >
            <div>{{list.name}}</div>
            <div class="number">{{list.number}}</div>
          </li>
        </div>
      </div>
      <div></div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'IntelligenceGroup',
  data() {
    return {
      ListData: [
        {
          number: '2',
          name: '电梯运行状态检测'
        },
        {
          number: '2',
          name: '门禁 '
        },
        {
          number: '18',
          name: '消防通道堆物探测'
        },
        {
          number: '0',
          name: '高空坠物探测'
        },
        {
          number: '0',
          name: '非机动车棚烟感'
        }
      ]
    }
  },
  methods: {},
  mounted() {}
}
</script>
<style lang="less" scoped>
.box {
  height: 30%;
  .header {
  }
  .content {
    padding-top: 0.5rem;
    box-sizing: border-box;
    height: calc(100% - 2rem);
    .boxStyle {
      width: 100%;
      height: 100%;
      .box-content {
        box-sizing: border-box;
        padding: 1rem;
        height: 100%;
        .liFlex {
          display: flex;
          height: 20%;
          justify-content: space-between;
          align-items: center;

          .number {
            font-weight: bold;
          }
        }
      }
    }
  }
}
</style>
